<template>
  <div class="container">
    <!-- 企业信息 -->
    <div class="manage-info brands">
      <div class="page-title"><p>填写企业信息</p></div>
      <group label-width="2.1rem" gutter="0.1rem" label-align="left">
        <x-input title="<i>*</i>企业名称:" 
          v-model="brandsInfo.business_name" placeholder="请填写企业名称" 
          text-align="right" placeholder-align='right' :show-clear="false"
        ></x-input>
        <popup-radio title="商标类型:" class="pop-title"
          :options="brandsType" v-model="brandsInfo.business_type" 
          placeholder="请选择"
        >
        </popup-radio>
        <x-input title="<i>*</i>商标注册号:" 
          v-model="brandsInfo.business_code" placeholder="请填写注册商标号" 
          text-align="right" placeholder-align='right' :show-clear="false"
        ></x-input>
        <x-input title="<i>*</i>品牌名称:" 
          v-model="brandsInfo.business_brand" placeholder="如有多个品牌，请以逗号分割" 
          text-align="right" placeholder-align='right' :show-clear="false"
        ></x-input>
        <x-input title="<i>*</i>商品链接:" 
          v-model="brandsInfo.business_link" placeholder="其他平台商品链接" 
          text-align="right" placeholder-align='right' :show-clear="false"
        ></x-input>
        <popup-picker title="<i>*</i>主营分类:" 
          :data="categoryList" :columns="2" 
          v-model="categoryItem" placeholder="请选择类目"
          placeholder-align='right'
          :display-format="format"
          @on-change="scrollChange"
        ></popup-picker>
      </group>
      <div class="next" @click="submitBandsInfo"><span>提交</span></div>
    </div>
  </div>
</template>

<script>
  import { Group, Cell, XInput, PopupPicker, XButton, PopupRadio } from 'vux';
  import Validator from '../../../utils/validator.js'
  import { getBrandsInfoApi, saveBrandsInfoApi, getCategoryListApi} from '../../../apis/privateApi.js'
  export default {
    components: { Group , Cell, XInput, PopupPicker, XButton, PopupRadio },
    data(){
      return{ 
        requestLockTimer:null,//请求锁定时器
        responseTimer:null,//提交锁定时器
        jumpForPageTimer:null,//跳转页面定时器
        btnClicked:false,
        brandsInfo:{
          business_name:'',//企业名称
          business_type:'',//商标类型
          business_code:'',//商标注册号
          business_brand:'',//品牌名称
          business_link:'',//商品链接
          business_mgmt:'',//主营分类名称
          business_mgmtid:''//主营分类id
        },
        categoryItem:[],//主营分类暂存值
        brandsType:['自有商标','授权商标'],//商标类型 1自有商标 2授权商标
        categoryList:[]//主营分类表
      }
    },
    created(){
      let _this=this;
      this.$navtiveUtils.checkLogin();
      window.isLogin = function(u) {
        if (u) {
          let userInfo = { user_id: u };
          window.userInfo = userInfo;
          _this.getInfoFromApi();
        } else {
          _this.$navtiveUtils.onLogin();
        }
      };
      this.requestForMainMenu();//获取主营分类
    },
    methods:{
      // 获取类目
      requestForMainMenu(){
        getCategoryListApi().then(res =>{
          if(res.code==200){
            this.categoryList=res.data;
          }
        })
      },
      //获取企业信息
      getInfoFromApi(){
        if(window.userInfo&&window.userInfo.user_id){
          let param=window.userInfo.user_id;
          getBrandsInfoApi(param).then(res =>{
            if(res.code==200){
              let data=res.data;
              data.business_type = res.data.business_type==1 ?'自有商标':'授权商标';
              //设置分类值
              if(res.data.business_mgmtid){this.categoryItem=res.data.business_mgmtid.split(",");}
              if(data.business_name || data.business_brand){
                this.brandsInfo=Object.assign(this.brandsInfo,data);
              }
            }
          })
        }
      },
      //保存企业信息
      submitBandsInfo(){
        if(!window.userInfo){
          this.$navtiveUtils.checkLogin();
          return ;
        }
        let result = this.validBrandsValue();
        if(result){
          if(this.btnClicked){
            this.$vux.toast.text('请勿重复操作!','middle');
            return false;
          }
          let _this = this;
          let tempBusinessType=this.brandsInfo.business_type;
          if(tempBusinessType=="授权商标"){ tempBusinessType=2 }
          else if(tempBusinessType=="自有商标"){ tempBusinessType=1 };
          let extralData={
            userId:window.userInfo.user_id,
            businessName:this.brandsInfo.business_name,
            businessType:tempBusinessType,
            businessCode:this.brandsInfo.business_code,
            businessBrand:this.brandsInfo.business_brand,
            businessLink:this.brandsInfo.business_link,
            businessMgmt:this.brandsInfo.business_mgmt,
            businessMgmtId:this.categoryItem.toString()
          }
          let param=Object.assign({},extralData);
          this.btnClicked=true;//防止重复点击
          this.requestLockTimer=setTimeout(() =>{
            this.btnClicked=false;
            this.requestLockTimer=null;
          },5000);
          saveBrandsInfoApi(param).then(res =>{
            this.$vux.loading.show();
            if(res.code==200){
              this.btnClicked=false;
              this.requestLockTimer=null;
              this.responseTimer=setTimeout(() =>{
                this.$vux.loading.hide();
                let forUrl='';
                localStorage.setItem('flushpage',1);
                if(window.location.hostname=='localhost'){forUrl= window.location.origin+'/views/Customer/formAudit.html';}
                else{ forUrl=window.location.origin+'/default/BusinessComeIn/views/Customer/formAudit.html'; }
                window.location.replace(forUrl);
              },1500);
            }
          });
        }
      },
      // 主营分类选择
      scrollChange(value){
        this.brandsInfo.business_mgmtid=value.toString();
        this.brandsInfo.business_mgmt=this.format(value);
      },
      format(value) {
        let strCode=[];
        this.categoryList.forEach(element => {
          if(element.value==value[0]){  strCode[0]=element.name  }
          if(element.parent==value[0] && element.value==value[1] && value[1]!=-1 ){ strCode[1]=element.name  }
        });
        return `${strCode.toString()}`
      },
      // 校验企业信息值合法性
      validBrandsValue(){
        let result = true;
        for (let key in this.brandsInfo) {
          let keyValue=this.brandsInfo[key];
          if(!keyValue){
            let msg='';
            switch(key){
              case 'business_name':
                msg='请输入企业名称!';break;
              case 'business_type':
                msg='请选择商标类型!';break;
              case 'business_code':
                msg='请输入商标注册号!';break;
              case 'business_brand':
                msg='请输入品牌名称!';break;
              case 'business_link':
                msg='请输入品牌链接!';break;
              case 'business_mgmt':
                msg='请选择主营分类!';break;
              default:
                msg='请完善必填项!';break;
            }
            this.$vux.toast.text(`${msg}`,'middle');
            result = false;
            break;
          };
        }
        return result ;
      },
    }
  }
</script>
<style lang="less">
html,body{
  font-size: 0.3rem;
  font-family: '微软雅黑';
}
.vux-toast,.weui-toast {
  font-size: .32rem;
  line-height: 0.4rem;
}
.vux-popup-dialog.vux-popup-bottom{
  font-size: 0.36rem;
}
.weui-cell .vux-cell-value{
  color: #000;
}
.weui-cells .vux-x-input .weui-label,.weui-cells .vux-cell-box .weui-label{
  color: #858585;
  font-size: 0.32rem;
  i{
    display: inline-block;
    font-style: normal;;
    color: #FF930F;
    padding-right: 0.08rem;
  }
}
.pop-title .vux-label{
  color: #858585;
  font-size: 0.32rem;
}
.pop-title .vux-label::before{
  font-style: normal;
  color: #FF930F;
  content: '*';
  padding-right: 0.08rem;
  display: inline-block;
}
</style>
<style lang="less" scoped>
.container{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;left: 0;
  font-size: 0.3rem;
  font-family: '微软雅黑';
  .manage-info{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;left: 0;
    z-index: 2;
    &.brands{
      animation: slidesPage  0.5s ease-in-out;
    }
  }
  .page-title{
    font-size: 0.36rem;
    line-height: 0.5rem;
    padding: 0.2rem 0.3rem;
    text-align:left;
    background: #fff;
  }
  .check{
    width: 2.4rem;
    background: #000;
  }
  .next{
    width: 3.2rem;
    height: 0.72rem;
    line-height: 0.72rem;
    text-align: center;
    margin: 3.2rem auto 0;
    color: #fff;
    border-radius: 0.08rem;
    color: #09142C;
    background: rgba(255,204,76, 1);
  }
}
@keyframes slidesPage {
  0%{
    left: 100%;z-index: 1;
  }
  100%{
    left: 0;z-index: 5;
  }
}
</style>